import React, { useState } from 'react';
import { Radio, Layout, Typography, Space } from 'antd';
import { useNavigate } from 'react-router-dom';
import { SafetyOutlined, BankOutlined, FireOutlined } from '@ant-design/icons';
import AnimatedButton from '../components/AnimatedButton';
import AnimatedText from '../components/AnimatedText';
import LegalParticlesBackground from '../components/LegalParticlesBackground';
import LegalDecorations from '../components/LegalDecorations';
import LegalCard from '../components/LegalCard';

const { Content } = Layout;
const { Title, Text } = Typography;

const StyleSelect = () => {
  const navigate = useNavigate();
  const [selectedStyle, setSelectedStyle] = useState(null);
  
  const styleOptions = [
    { 
      value: 'conservative', 
      label: '保守',
      icon: <SafetyOutlined />,
      stats: '法盾值：6，律刃值：1',
      description: '优先保护自己，更高的法盾值提供了更多犯错机会，但律刃值较低',
      features: [
        '每回合可承受更多错误',
        '更适合法律知识初学者',
        '游戏节奏较慢，有更多思考时间',
        '适合稳扎稳打的玩家'
      ]
    },
    { 
      value: 'balanced', 
      label: '稳健',
      icon: <BankOutlined />,
      stats: '法盾值：4，律刃值：2',
      description: '平衡的属性配置，既有足够的法盾值保护，也有不错的律刃值输出',
      features: [
        '平衡的防御与攻击能力',
        '适合有一定法律基础的玩家',
        '中等游戏难度与节奏',
        '最通用的游戏体验'
      ]
    },
    { 
      value: 'aggressive', 
      label: '激进',
      icon: <FireOutlined />,
      stats: '法盾值：2，律刃值：3',
      description: '高风险高回报，高律刃值能迅速击败Boss，但法盾值较低需谨慎作答',
      features: [
        '强大的攻击能力，迅速解决案件',
        '容错率低，需要精准的法律知识',
        '适合法律专业人士挑战',
        '高难度，高回报的游戏体验'
      ]
    }
  ];

  const handleConfirm = () => {
    if (!selectedStyle) {
      alert('请选择一种风格');
      return;
    }
    
    // 获取选中的风格数据，但不包含React元素
    const selected = styleOptions.find(option => option.value === selectedStyle);
    // 创建一个新的对象，不包含icon属性(因为icon是React元素)
    const safeSelected = {
      value: selected.value,
      label: selected.label,
      stats: selected.stats,
      description: selected.description,
      features: selected.features
    };
    
    navigate('/case-select', { state: { style: safeSelected } });
  };

  return (
    <Layout className="law-adventure-layout">
      {/* 粒子背景 */}
      <LegalParticlesBackground type="lawBooks" />
      
      {/* 装饰元素 */}
      <LegalDecorations type="cornerScroll" />
      <LegalDecorations type="goldenFrame" />
      
      <Content style={{ 
        padding: '50px 24px', 
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        position: 'relative',
        zIndex: 1
      }}>
        <AnimatedText
          text="选择游戏风格"
          type="wordByWord"
          fontSize="36px"
          fontWeight="600"
          fontFamily="var(--title-font)"
          color="var(--primary-color)"
          textAlign="center"
          style={{ marginBottom: '40px' }}
        />
        
        <div style={{ maxWidth: 600, margin: '0 auto', width: '100%' }}>
          <Radio.Group 
            onChange={(e) => setSelectedStyle(e.target.value)} 
            value={selectedStyle}
            style={{ 
              display: 'flex', 
              flexDirection: 'column', 
              gap: 20,
              width: '100%'
            }}
          >
            {styleOptions.map((style, index) => (
              <LegalCard
                key={style.value}
                style={
                  selectedStyle === style.value
                    ? style.value === 'conservative' 
                      ? 'legal' 
                      : style.value === 'balanced' 
                        ? 'scroll' 
                        : 'parchment'
                    : 'default'
                }
                hoverable={true}
                title={
                  <Radio.Button 
                    value={style.value}
                    style={{ 
                      width: '100%',
                      height: 'auto',
                      padding: '12px',
                      background: 'transparent',
                      border: 'none',
                      boxShadow: 'none',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'flex-start'
                    }}
                  >
                    <Space align="center" size={12}>
                      <span style={{ 
                        fontSize: '24px', 
                        color: selectedStyle === style.value 
                          ? style.value === 'conservative'
                            ? 'var(--primary-color)'
                            : style.value === 'balanced'
                              ? 'var(--secondary-color)'
                              : 'var(--accent-color)'
                          : 'var(--secondary-color)' 
                      }}>
                        {style.icon}
                      </span>
                      <span style={{ fontSize: '20px', fontWeight: 500 }}>{style.label}</span>
                    </Space>
                  </Radio.Button>
                }
              >
                {/* 使用更醒目的方式展示属性值 */}
                <div style={{ 
                  display: 'flex', 
                  justifyContent: 'space-around', 
                  marginBottom: '20px',
                  background: selectedStyle === style.value 
                    ? 'rgba(0, 0, 0, 0.05)' 
                    : 'transparent',
                  padding: '12px',
                  borderRadius: '8px',
                  border: '1px dashed var(--border-color)'
                }}>
                  <div style={{ textAlign: 'center' }}>
                    <div style={{ 
                      fontSize: '16px', 
                      fontWeight: 'bold',
                      color: 'var(--primary-color)'
                    }}>
                      法盾值
                    </div>
                    <div style={{ 
                      fontSize: '32px', 
                      fontWeight: 'bold',
                      color: selectedStyle === style.value 
                        ? style.value === 'conservative'
                          ? 'var(--primary-color)'
                          : style.value === 'balanced'
                            ? 'var(--secondary-color)'
                            : 'var(--accent-color)'
                        : 'var(--text-color)',
                      marginTop: '8px'
                    }}>
                      {style.value === 'conservative' ? '6' : style.value === 'balanced' ? '4' : '2'}
                    </div>
                  </div>

                  <div style={{ textAlign: 'center' }}>
                    <div style={{ 
                      fontSize: '16px', 
                      fontWeight: 'bold',
                      color: 'var(--accent-color)'
                    }}>
                      律刃值
                    </div>
                    <div style={{ 
                      fontSize: '32px', 
                      fontWeight: 'bold',
                      color: selectedStyle === style.value 
                        ? style.value === 'conservative'
                          ? 'var(--primary-color)'
                          : style.value === 'balanced'
                            ? 'var(--secondary-color)'
                            : 'var(--accent-color)'
                        : 'var(--text-color)',
                      marginTop: '8px'
                    }}>
                      {style.value === 'conservative' ? '1' : style.value === 'balanced' ? '2' : '3'}
                    </div>
                  </div>
                </div>
                
                <AnimatedText
                  text={style.description}
                  type="fade"
                  delay={0.5 + index * 0.2}
                  style={{ display: 'block', marginBottom: '15px' }}
                />
                
                {/* 添加风格特点列表 */}
                <div style={{ marginTop: '10px' }}>
                  <AnimatedText
                    text="风格特点:"
                    type="highlight"
                    delay={0.6 + index * 0.2}
                    fontSize="16px"
                    fontWeight="bold"
                    style={{ display: 'block', marginBottom: '8px' }}
                  />
                  
                  <ul style={{ 
                    paddingLeft: '20px', 
                    margin: '0',
                    color: selectedStyle === style.value 
                      ? style.value === 'conservative'
                        ? 'var(--primary-color)'
                        : style.value === 'balanced'
                          ? 'var(--secondary-color)'
                          : 'var(--accent-color)'
                      : 'var(--text-color)'
                  }}>
                    {style.features.map((feature, featureIndex) => (
                      <li key={featureIndex}>
                        <AnimatedText
                          text={feature}
                          type="slideRight"
                          delay={0.7 + index * 0.2 + featureIndex * 0.1}
                          fontSize="14px"
                        />
                      </li>
                    ))}
                  </ul>
                </div>
              </LegalCard>
            ))}
          </Radio.Group>
          
          <div style={{ textAlign: 'center', marginTop: '40px', display: 'flex', justifyContent: 'center', gap: '20px' }}>
            <AnimatedButton
              style="legal"
              type="primary"
              onClick={handleConfirm}
              disabled={!selectedStyle}
            >
              确定
            </AnimatedButton>
            
            <AnimatedButton 
              style="scroll"
              type="default"
              onClick={() => navigate(-1)}
            >
              返回
            </AnimatedButton>
          </div>
        </div>
      </Content>
    </Layout>
  );
};

export default StyleSelect;
